<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团扇介绍</title>
  </head>
  <link rel="stylesheet" href="../css/all.css" />
  <style>
    .container {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      height: 100vh;
      background-image: url("../img/bac1.png");
      background-size: cover;
    }
    /* 头部 */
    .header {
      height: 20%;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      justify-content: space-around;
    }
    .header-left {
      display: flex;
      width: 80%;
      height: 100%;
      justify-content: flex-start;
      align-items: center;
      background-image: url("../img/introduce/zuzi.png");
      background-size: 30% 100%;
      background-position: 0%;
      background-repeat: no-repeat;
      padding-left: 30px;
      z-index: 3;
    }
    .logo {
      background-image: url("../img/introduce/logo.png");
      background-size: 198% 360%;
      background-repeat: no-repeat;
      width: 60px;
      height: 55px;
      background-position: 50% 70%;
      cursor: pointer;

      /* background-color: aqua; */
    }

    /* 头部 */
    .title {
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      font-size: 3.3em;
      font-family: font3;
      color: #789a89;
      padding-left: 14px;
      z-index: 1;
    }
    .header-right {
      display: flex;
      width: 18%;
      height: 100%;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 23px;
    }
    .header-right > ul {
      display: flex;
      height: 10%;
      width: 15%;
      list-style-type: none;
    }
    .header-right > ul > li {
      position: relative;
      font-family: font3;
      transition: all 0.5s ease;
      height: auto;
      font-size: 2.3em;
      transition: all 0.5s ease;
      font-weight: bold;
      padding-left: 24px;
      color: #8f3536;
      cursor: pointer;
    }
    .header-right > ul > li > a {
      text-decoration: none; /* 取消下划线 */
      color: inherit; /* 继承父元素的文字颜色 */
      cursor: pointer; /* 鼠标悬停时显示手型 */
    }
    .header-right > ul > li:hover {
      color: #83a795;
    }
    .header-right > ul > li.active {
      color: #83a795;
    }
    .header-right > ul > li:not(:first-child)::after {
      content: "";
      width: 4px;
      height: 50px;
      left: 7px;
      position: absolute;
      top: 15px;
      background-color: #8f3536;
    }
    /* 头部结束 */
    .main {
      display: flex;
      height: 80%;
      width: 100%;
      justify-content: center;
      align-items: flex-start;
      opacity: 0;
      transition: all 0.5s ease;
      /* background-color: #789a89; */

      position: relative;
    }
    .mainBox {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      padding-left: 20px;
      width: 68%;
      height: 90%;
    }
    .intTextBox {
      width: 84%;
      height: 80%;
      background-color: #83a795;
    }
    .intImg {
      width: 29%;
      height: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      right: -13%;
      top: -4%;
      transform: rotate(15deg);
      background-image: url("../img/introduce/sanzi.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    .sanzi-logo {
      display: flex;
      justify-content: center;
      position: absolute;

      right: -5%;
      bottom: 20%;
    }
    /* 主体文字 */
    .intTextBox {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("../img/introduce/bac2.jpg");
      background-size: 150% 190%;
      background-repeat: no-repeat;
      background-position: 50%;
      border: 3px solid #9c2933;
    }
    .intText-main {
      display: flex;
      align-items: center;
      width: 98%;
      height: 98%;
      padding: 20px;
      border: 3px solid #af7d76;
      justify-content: center;
    }

    .intText-main > span {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      /* white-space: pre-wrap; 将空格保留并按照原样显示 */
      margin-left: 0.1em;
      height: 100%;
      width: 90%;
      font-family: font3;
      line-height: 1.3em;
      font-size: 2.2em;
      background-image: url(../img/1-2-6.jpg);
      background-size: 500%;
      background-position: 47% 60%;
      background-repeat: no-repeat;
    }
    .intText-main span > div {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      font-size: 1.5em;
      color: #7e2224;
    }

    .intText-main p {
      color: brown;
      line-height: 1.3em;
    }
    .main-text {
      margin-top: 20px;
      height: 100%;
      overflow: auto;
      text-indent: 1em;
    }
    .main-text::-webkit-scrollbar {
      display: none;
    }

    .main-text > span > p {
      display: inline-block;
      text-indent: 2em; /* 设置首行缩进为2个字符的宽度 */
    }
    .main-text > p {
      display: inline-block;
    }
    /* 人物 */
    .people {
      position: absolute;
      display: flex;
      background-image: url(../img/people/精灵-0.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 20%;
      height: 50%;
      max-width: 391px;
      max-height: 350px;
      bottom: 2%;
      left: 2%;
      opacity: 0.6;
      transition: all 0.5s ease;
    }
    /* .people:hover {
      opacity: 1;
    } */
    .people.active {
      opacity: 0.6;
    }

    /* 竹子 */
    .zuzi {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 240% 120%;
      background-position: 73% 100%;
      transform: rotate(10deg) translateX(10%);
      z-index: 3;
      opacity: 0.7;
    }
    .zuzi2 {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 210% 120%;
      background-position: 95% 100%;
      transform: rotate(-24deg);
      z-index: 3;
      opacity: 0.7;
    }
    .zuzi3 {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 240% 120%;
      background-position: 85% 100%;
      transform: rotate(0deg);
      z-index: 3;
      opacity: 0.7;
    }
    /* 切换按钮 */
    .lef-btn {
      display: flex;
      justify-content: center;
      width: 11%;
      position: absolute;
      left: 0;
      transform: rotate(50deg) translateX(-60%);
      top: 45%;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.5s ease;
    }
    .lef-btn:hover {
      opacity: 1;
    }
    .lef-btn:hover > img:nth-child(2) {
      opacity: 0.7;
    }
    .lef-btn > img {
      width: 100%;
    }
    .right-btn {
      display: flex;
      justify-content: center;
      width: 11%;
      position: absolute;
      right: 0;
      transform: rotate(-65deg) translateY(40%);
      z-index: 10;
      top: 48%;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.5s ease;
    }
    .right-btn:hover {
      opacity: 1;
    }

    .right-btn > img {
      width: 100%;
    }
    .right-btn:hover > img:nth-child(2) {
      opacity: 0.7;
    }
    /* 鼠标跟随 */
    #follower {
      position: absolute;
      z-index: 999;
      transition: transform 0.1s ease;
      width: 20px;
      height: 20px;

      background-color: rgba(212, 38, 38, 0.4);
      position: absolute;
      border-radius: 50%; /* 将方形 div 变成圆形 */
      pointer-events: none;
    }
    .showThree {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 10%;
      /* background-color: #7e2224; */
      background-image: url(../img/anniu2.png);
      background-size: 130%;
      background-position: 50% 40%;
      font-family: font3;
      font-size: 1.7em;
      bottom: 5%;
      cursor: pointer;
      left: 45%;
      transform: translateX(-50%);
      color: #7e2224;
    }

    .detail {
      position: relative;
      margin-left: -20px;
      text-indent: 0;
      width: 1px;
      cursor: pointer;
      color: #7e2224;
      transition: all 0.5s ease;
      opacity: 1;
    }

    .detail::after {
      opacity: 0;
      transition: all 0.5s ease;
      z-index: 20;
    }

    .detail:hover {
      display: inline;
      background-color: #ece2d5;
      height: 5px;
      color: #7e2224;
      width: 10px;
    }
    .detail:hover::after {
      opacity: 1;
      width: 300px;
      font-size: 2m;
      position: absolute;
      line-height: 1.5em;
      top: 0;
      left: 90%;
      transform: translateY(-105%);
      font-size: 0.7em;
      border: 2px solid #7e2224;
      background-color: #ece2d5;
      content: "纨扇[wán shàn],细绢削成的团扇,因形似圆月，宫中多用之,故称";
    }
    .detail1:hover::after {
      opacity: 1;
      width: 300px;
      position: absolute;
      line-height: 1.4em;
      top: 250%;
      left: -40%;
      transform: translateY(-65%);
      border: 2px solid #7e2224;
      content: "葵树叶子制作加工而成,大称牛心扇，小称鸡心扇。";
    }
    .detail2 {
      margin-left: 0px;
    }
    .detail2:hover::after {
      opacity: 1;
      width: 300px;
      position: absolute;
      line-height: 1.4em;
      top: 200%;
      left: 100%;
      transform: translateY(-65%);
      border: 2px solid #7e2224;
      content: "巨竹截而剖之,熨成平版面，色白如玉，上宽下狭";
    }
    .detail3:hover::after {
      opacity: 1;
      width: 300px;
      position: absolute;
      line-height: 1.4em;
      top: 290%;
      left: -150%;
      transform: translateY(-55%);
      border: 2px solid #7e2224;
      content: "将麦草编织成扇条，再将扇条盘缝成圆扇面，俗称“扇麦饼”。";
    }
    .detail4 {
      margin-left: 0px;
    }
    .detail.detail4:hover::after {
      margin-left: 10px;
      opacity: 1;
      width: 450px;
      position: absolute;
      line-height: 1.4em;
      transform: translateX(-8%) translateY(25%);
      content: "平扇是一种中国传统的扇子，也称为团扇或圆扇。扇骨是圆形的，平扇通常比较简单，形状如圆盘，上饰绘画或书法。平扇在中国历史上被广泛使用，既是一种日常生活用品，也是一种文化艺术品。";
    }
    .detail5 {
      margin-left: 0px;
    }
    .detail.detail5:hover::after {
      margin-left: 10px;
      opacity: 1;
      width: 450px;
      position: absolute;
      line-height: 1.4em;
      transform: translateX(-55%) translateY(25%);
      content: "折扇，一种可折叠的扇子，也称折叠扇。扇骨可以折叠，通常由一根或多根细长的扇骨构成，中间连接着扇面。折扇在打开时可以用来遮挡风或者扇凉，折叠时则更加方便携带。";
    }
    .left-btn {
      display: flex;
      justify-content: center;
      width: 25%;
      height: 25%;
      top: 10%;
      transform: scaleX(100%) scaleY(70%);
      position: absolute;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s ease;
    }
    .right-arr {
      display: flex;
      justify-content: center;
      width: 25%;
      height: 25%;
      position: absolute;
      z-index: 10;
      left: 7%;
      opacity: 0;
      top: 9%;
      transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
      cursor: pointer;
      transition: all 0.5s ease;
    }
  </style>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"><a href="../index.html"></a></div>
          <div class="title">
            <span>团扇介绍</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li class="active"><a href="./introduce.html">初识</a></li>
            <li><a href="./history.html">远溯</a></li>
            <li><a href="./kind.html">览境</a></li>
            <li><a href="./structure.html">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="mainBox">
          <div class="intTextBox">
            <div class="intText-main">
              <span
                ><div>初识团扇</div>
                <span class="main-text">
                  <p>中国古代扇子</p>
                  有三到四千年的历史,大体归为两类,一是<span
                    class="detail detail4"
                    >平扇</span
                  >
                  包括团扇、<span class="detail detail1"> 葵扇、</span>
                  <span class="detail detail3">麦草扇、</span>
                  <span class="detail detail2"> 玉版扇</span>
                  等，不能折叠；二是<span class="detail detail5">折扇</span
                  >，可自如敞开收叠。
                  <br />
                  <span>
                    <p>团扇</p>
                    又称宫扇、
                    <span class="detail">纨扇</span>
                    ,
                    是中国汉族传统工艺品及艺术品，是一种圆形有柄的扇子，它代表着团圆友善、吉祥如意。
                    最开始是作纳凉之用
                    ，后来随着历的发展使团扇逐渐从实用性功能的器物向艺术性、审美性功能转变。
                  </span>
                </span>
              </span>
            </div>
          </div>
          <div class="intImg"></div>

          <div class="sanzi-logo">
            <img src="../img/index/logo.png" alt="" />
          </div>
        </div>

        <!-- people -->
        <div class="people active"></div>
        <!-- 这里吧右下角的竹子去了 -->
        <div class="zuzi"></div>
        <div class="zuzi2"></div>
        <div class="zuzi3"></div>
      </div>
      <div class="lef-btn">
        <img src="../img/last-btn.png" alt="" />
        <img class="left-btn" src="../img/left-btn.svg" alt="" />
      </div>
      <div class="right-btn">
        <img src="../img/next-6-btn.png" alt="" />
        <img class="right-arr" src="../img/left-btn.svg" alt="" />
      </div>
      <audio id="audio" loop>
        <source src="../audio/bacmusic3.MP3" />
      </audio>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
<script>
  (() => {
    window.onload = () => {
      people();
      btn();
      initBody();
      initFollow();
      initRoute();
      initRoute();
      peopleOpacity();
      player();
      loclaMusic();
    };
  })();

  // 人
  function people() {
    // 眨眼
    const people = document.querySelector(".people");
    let blank_index = 0;

    timeout = 4000;
    let blink = () => {
      if (blank_index == 2) {
        blank_index = 0;
        timeout = 4000;
      } else {
        blank_index += 1;
        timeout = 40;
      }
      people.style.backgroundImage = `url(../img/people/精灵-${blank_index}.png)`;
      setTimeout(() => {
        blink();
      }, timeout);
    };
    blink();
  }

  // 播放
  // 保存播放状态
  function loclaMusic() {
    const savedPlaybackState = localStorage.getItem("playbackState");

    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      audio.currentTime = playbackState.currentTime;

      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;

    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();
    });
    // 结束 给人透明

    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  // 开始即眨眼

  function btn() {
    const leftBtn = document.querySelector(".lef-btn");

    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "./area.html";
    });
  }

  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  function initBody() {
    const main = document.querySelector(".main");
    setTimeout(() => {
      main.style.opacity = "1";
    }, 5);
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 0) {
        li.addEventListener("mouseover", () => {
          lis[0].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[0].classList.add("active");
        });
      }
    });
  }

  //

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 3000);
  }
</script>
